<template>
  <div :style="styles">
    <h1 style="color:Orange">图片标注网站</h1>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-button style="width: 300px" type="primary" @click="doLogin" @keydown.enter.native="doLogin">登录</el-button>
            </td>
          </tr>
          <span  v-text="this.user.errorMsg" style="color: red;font-size: 15px"></span>
        </table>
        <router-link to="/RegisterPage">
          <el-link type="primary">还没有账号？去注册</el-link>
        </router-link>
      </el-card>
    </div>
  </div>
</template>
<script>
  import picture from '@/assets/background.jpg'
  import axios from "axios";
  export default {
    name: 'LoginPage',
    data() {
      return{
        user:{
          username:'',
          password:'',
          errorMsg:''
        },
        styles: {
            width:"100%",
            height:"1000px",
            backgroundImage:`url(${picture})`,
            position: 'absolute',
            top: '0%',
            left: '0%',
        }
      }
    },
    methods:{
      doLogin(){
          axios.post(
            '/user/login/',
            {
                id:this.user.username,
                password:this.user.password,
              }
          ).then((response)=>{
            let code = response.data.code
            if (code === 200)
            {
              // 获取返回值中的token并存在session中
              let token = response.data.token
              this.user.errorMsg=response.data.message
              window.sessionStorage.setItem("token", token);
              this.$router.push({path:"/MainPage"})
            }
            else{
              this.user.errorMsg=response.data.message
            }
          })
      }
    }
  }
</script>
